<template>
  <el-form :model="form" label-width="auto" style="max-width: 800px" :inline="true">
    <el-form-item label="请选择常数类别">
      <el-select
          @change="typeChange"
          v-model="selectType"
          placeholder="请选择常数类别..."
          size="large"
          style="width: 240px"
      >
        <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.constanttypename"
            :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="查询关键词">
      <el-input v-model="searchKeyword" placeholder="请输入常数项编码或名称" size="large" style="width: 240px" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="toAdd">添加</el-button>
      <el-button type="primary" @click="searchData">查询</el-button>
    </el-form-item>
  </el-form>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="constanttypeid" label="常数类别ID" width="180"/>
      <el-table-column prop="constantcode" label="常数项编码" width="180"/>
      <el-table-column prop="constantname" label="常数项名称"/>
      <el-table-column label="操作">
        <template #default="solt">
          <el-button link type="primary" size="small" @click="toEdit(solt)"> 编辑</el-button>
          <el-button link type="primary" size="small" @click="removeById(solt.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 添加表单 dialogFormVisible 表示是否显示，  boolean   -->
  <el-dialog v-model="editDialogFormVisible" title="用户编辑" width="500">
    <el-form :model="editForm" label-width="auto">
      <el-form-item label="常数类别ID">
        <el-input v-model="editForm.constanttypeid"/>
      </el-form-item>
      <el-form-item label="常数项名称">
        <el-input v-model="editForm.constantcode"/>
      </el-form-item>
      <el-form-item label="常数类别编码">
        <el-input v-model="editForm.constantname"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import {onMounted, onUnmounted, ref} from 'vue'
import {ElMessageBox, ElNotification} from 'element-plus'
import service from '@/utils/request'

// 常数类别列表用户选择的typeid
let selectType = ref('')
// 常数类别列表
let options = ref([])
let form = ref({});
// 是否显示 dialog
let editDialogFormVisible = ref(false);
// 编辑表单数据
let editForm = ref({
  id: '',
  constanttypeid: '',
  constantcode: '',
  constantname: '',
});
// 搜索关键词
let searchKeyword = ref('')
// 表格数据
let tableData = ref([])

// 提交数据
function onSubmit() {
  console.log("form", form.value);
}

// 添加按钮点击事件
function toAdd() {
  editDialogFormVisible.value = true;
}

// 常数类别选择变化事件
function typeChange(a) {
  service.post("/constantitem/getbytypeid", {id: a}).then(
      res => {
        tableData.value = res.data
      }
  )
}

// 保存按钮点击事件
function save() {
  // 1 获取添加的表单信息
  console.log("editForm.value: ", editForm.value);
  // 2 发送网络请求 到后端
  service.post("/constantitem/add", editForm.value).then(
      res => {
        console.log(res.data)
        // 3 判断 请求结果，成功与否
        editDialogFormVisible.value = false;
        if (res.data) {
          // 给与用户反馈
          ElNotification({
            title: '提示',
            message: '保存成功!!!!!!!!!!!!!',
            type: 'success',
          })
          listData();
        } else {
          // 给与用户反馈
          ElNotification({
            title: '提示',
            message: '保存失败!!!!!!!!!!!!!',
            type: 'error',
          })
        }
      }
  )
  editDialogFormVisible.value = false;
}

// 获取数据列表
function listData() {
  service.get("/constantitem/list").then(
      res => {
        tableData.value = res.data;
      }
  )
}

// 编辑按钮点击事件
function toEdit({row}) {
  const id = row.id
  service.get(`/constantitem/getById/` + id).then(({status, data}) => {
    // 根据用户id ，查询当前待修改的数据
    editForm.value.id = data.id
    editForm.value.constanttypeid = data.constanttypeid
    editForm.value.constantcode = data.constantcode
    editForm.value.constantname = data.constantname
    editDialogFormVisible.value = true;
  })
}

// 删除按钮点击事件
function removeById(id) {
  // 确认是否删除
  ElMessageBox.confirm(
      '是否确认删除?',
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        service.get('/constantitem/deleteById/' + id).then(({status, data}) => {
          if (data) {
            // 给与用户反馈
            ElNotification({
              title: '提示',
              message: '删除成功!!!!!!!!!!!!!',
              type: 'success',
            })
            // 查询最新的数据
            listData();
          } else {
            // 给与用户反馈
            ElNotification({
              title: '提示',
              message: '删除失败',
              type: 'error',
            })
          }
        })
      })
}

// 搜索数据
function searchData() {
  if (!searchKeyword.value) {
    // 如果没有输入关键词，加载全部数据
    listData();
    return;
  }

  // 发送搜索请求
  service.post("/constantitem/search", {
    keyword: searchKeyword.value,
    typeId: selectType.value
  }).then(res => {
    if (res.data) {
      tableData.value = res.data;
    } else {
      tableData.value = [];
      ElNotification({
        title: '提示',
        message: '未找到匹配的数据',
        type: 'info',
      })
    }
  });
}

onMounted(() => {
  // 加载常数项所有数据
  listData()
  // 加载常数类别，提供给用户选择（下拉列别）
  service.get("/constanttype/list").then(
      res => {
        options.value = res.data
        // selectType.value = 1
      }
  )
})
</script>